<template>
  <div>
    <div class="notice" v-for="data in indexfirstListData">
      <div class="item">
        <span>{{data.itemName}}</span>
        <span v-if="data.more" @click="goTo()" class="cursor-pointer">{{data.more}}</span>
      </div>
      <div class="title" @click="goTo(data.url)">
        <div v-if="data.title">{{data.title}}</div>
        <div v-if="data.desc">{{data.desc}}</div>
      </div>
      <div class="list">
        <ul>
          <li v-for="l in data.list" @click="goTo(l.url)" class="cursor-pointer"><span class="squra"></span>{{l.title}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      indexfirstListData: {
        type: Array,
        default: []
      }
    },
    methods: {
      goTo(u) {
        this.$router.push(u)
      },
      mouseenterFn(v) {
        if (v === undefined){
          this.show = false
          return false
        }
        this.list = v
        this.show = true
      }
    }
  }
</script>
<style lang="less">
.notice {
  width: 100%;
  // height: 400px;
  border: 1px solid #DCDCDC;
  .item {
    width: 100%;
    height: 50px;
    background: #ffffff;
    font-size: 22px;
    line-height: 60px;
    span {
      &:last-child {
        padding-left: 40%;
      }
    }
  }
  .title {
    padding: 0 10px;
    cursor: pointer;
    div {

      &:first-child {
        padding-top: 20px;
        font-size: 18px;
        font-weight: 600;
      }
      &:last-child {
        font-size: 12px;
        margin: 10px 0;
        text-indent: 20px;
      }

    }
  }

  li + li {
    margin-top: 10px;
  }
  .list {
    padding: 20px 10px;
    font-size: 12px;
  }
  .squra{
    width: 5px;
    height: 5px;
    background-color:#1ca3e5;
    display: inline-block;
    vertical-align: middle;
  }
}
.notice{
  border-bottom: none;
}
.notice{
  &:last-child {
    border-bottom: 1px solid #DCDCDC;
  }

}

.cursor-pointer {
  cursor: pointer;
}
</style>